<script setup lang="ts">
import { useMemberStore, useDeviceStore } from '@/stores'
import { getReportListApi,getReportDetailApi } from '@/services/report'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import type { reportList } from '@/types/report'
import { useReportStore } from '@/stores'
const memberStore = useMemberStore()
const deviceStore = useDeviceStore()
const reportStore = useReportStore()
const isRefresh = ref(false)
const onRefresh = async () => {
  //console.log('刷新')
  isRefresh.value = true
  await deviceStore.getDeviceList()
  isRefresh.value = false
}
//请求分页数据
const num = ref(10)
//页起始不是页码是第几个,从0开始
const start = ref(0)
const ReportList = ref<reportList>([])
const finished = ref(false)
//防止在请求没回来前重复请求
const isRequst = ref(false)
const getReportList = async () => {
  if (isRequst.value || finished.value) {
    return
  }
  if (memberStore.profile && memberStore.profile?.id) {
    isRequst.value = true
    const res = await getReportListApi({
      size: num.value,
      start: start.value,
      userId: memberStore.profile.id,
    })
    if (res.data.length == 0) {
      finished.value = true
      isRequst.value = false
      return
    }
    ReportList.value?.push(...res.data)
    start.value = start.value + 10
    isRequst.value = false
    console.log(ReportList.value)
  }
}
onLoad(() => {
  getReportList()
})

/* 跳转的页面参数不能使用对象 */
const showdetail = async (deviceNum: string, date: string, ) => {
  const res = await getReportDetailApi({
    date,
    mtrlId: deviceNum,
  })
  
  reportStore.setReport(res.data)
  uni.navigateTo({
    url: '/pagesReport/report-detail/report-detail',
  })
}
</script>

<template>
  <view class="content">
    <view class="title"> 报告 </view>
    <scroll-view
      scroll-y
      class="scroll-view"
      :refresher-enabled="true"
      @refresherrefresh="onRefresh"
      :refresher-triggered="isRefresh"
      @scrolltolower="getReportList"
    >
      <view
        class="info-box"
        v-for="(item, index) in ReportList"
        :key="index"
        @click="showdetail(item.deviceNum, item.day)"
      >
        <up-avatar :src="item.picture" size="65"></up-avatar>
        <view style="margin-left: 19.231rpx; font-size: 30.769rpx">
          <view>{{ item.name }}</view>
          <view style="font-size: 26.923rpx; color: #cbcbcb">{{ item.day }}</view>
        </view>

        <view style="margin-left: auto; font-size: 38.462rpx; text-align: right">
          <view v-if="item.slpQua >= 60" style="color: #4191fd">{{ item.slpQua + '分' }}</view>
          <view v-else style="color: #f1bd32">{{ item.slpQua + '分' }}</view>
          <view style="font-size: 23.077rpx; color: #cbcbcb">{{ '睡眠平衡指数' }}</view>
        </view>
        <view>
          <u-icon name="arrow-right" color="#cbcbcb" size="22"></u-icon>
        </view>
      </view>
      <!--等待动画 -->
      <view class="waitting">
        <u-loading-icon text="加载中" textSize="12" :show="isRequst"></u-loading-icon>
        <view
          v-if="finished"
          style="font-size: 26.923rpx; color: #aeb7bc; text-align: center; margin: 19.231rpx 0"
          >没有更多数据了</view
        >
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  font-family: PingFangSC-regular;
  overflow: hidden;
  .content {
   height: 100%;
    display: flex;
    flex-direction: column;
    background: url(@/static/starry2.png) no-repeat;
    background-size: contain;
    .title {
      padding-top: 115.385rpx;
      padding-bottom: 28.846rpx;
      font-size: 34.615rpx;
      color: #ffff;
      text-align: center;
    }
    .scroll-view {
      overflow: hidden;
      padding-left: 19.231rpx;
      padding-right: 19.231rpx;
      box-sizing: border-box;
    }
    .info-box {
      display: flex;
      align-items: center;
      padding: 19.231rpx 0;
      border-bottom: 1.923rpx solid #dddddd;
    }
  }
}
</style>
